Rodrigo Fernando

Project

(A)

Flow Engine | Forms

This feature allows System Administrators to build forms and add sections and fields, which end-users can fill out during case processing for KYC, AML, and other applications.

It facilitates System Administrators' creation of custom input fields, enhancing flexibility and adaptability for various use cases, such as KYC (Know Your Customer) and AML (Anti-Money Laundering).

This feature allows System Administrators to build forms and add sections and fields, which end-users can fill out during case processing for KYC, AML, and other applications.

Overview

(B)

Problem

How might we improve the form builder to reduce configuration time and make previewing and editing forms easier before publishing?

Outcome

By enhancing the visual hierarchy and redesigning section cards and button functions, we clarified parent-child relationships and improved user guidance. These changes led to a 75% increase in user satisfaction and faster task completion while streamlining the addition of fields and previewing forms.

This research project focused on improving the Case Template by identifying usability issues and proposing enhancements to its configuration, which is one of the platform's main tasks.

Info

(C)

Role

Product Designer

Timeline

6 weeks

Team

Project Manager

Tech Lead

Developers (Back/Front - End, QAs)

Tools

Figma

Miro

Design Sprint

(D)

I worked on a 2-week Sprint, from discovery ideation to ready-for-development

My main challenge was ensuring the proposed changes would keep other parts of the Flow Engine platform intact. I worked collaboratively with developers to ensure the new design was integrated seamlessly without extra deployment complexity.

The tickets raised with the Customer Delivery Support team mainly guided the product's improvements. This project presented an opportunity for the UX team to influence the Product Roadmap and create a backlog of improvements.

Week: 1 - 2

Due to the feature's complexity, the first week I spent dissecting it to understand all its functionalities and creating a user flow to understand its interconnectedness. Also, I ran a workshop session with the main team stakeholders to define the business goals, problem statement, user story, and what we wanted to learn from users during the UX interview.

At the start of the project, the UX/UI designers and I conducted a heuristic evaluation of the feature, identifying design and UX best practice issues and technical problems.  We categorised these issues and discussed them with the Project Manager, ensuring a systematic approach that paved the way for a user-centric design process.

Week: 3 - 4

I ran a Context Inquiry and UX Interview with 5 participants and collated the feedback ready to represent to the team. Afterwards, I ran a workshop with the team to develop How Might We questions and a brainstorming session that allowed us to experiment with different ways to solve the design challenge.

Week: 5 - 6

Once the team was aligned with what we wanted to build, I drafted a new user flow and translated it into sketches and prototypes ready to test. I ran continuous usability testing with 5 participants and iterated on the prototype until it was refined and prepared for development.

Previous layout

(E)

UX Research

(F)

User Interview Findings

Using semi-structured interviews and task analysis with System Administrators, I identified their pain points, goals, and needs. I then grouped insights using affinity mapping to prepare for ideation.

100%

of Practitioners expressed concerned how complex the form configurations was.

Ensuring the navigation and user journey are simplified is essential for improving task completion.

To improve the product's self-service nature, users will need guidance throughout each step (think of an IKEA self-service restaurant).

80%

of System Administrator think that relationship between sections were a hard to keep track on.

How easily can users understand the relationship within parent-children sections?

75%

of System Administrator used two separate windows to visualise the final form layout.

Visualising how changes affect the form for the end user was crucial in speeding up the process.

Users should be able to navigate the product in a way that reflects their mental model and does not require too much effort.

Sketching

(G)

Prototype #1

Feature #1

(H)

Form builder

The Form builder workflow was designed to be an intuitive interface.

This interface makes it easy for users to add sections and understand and navigate through the form sections, reducing confusion and errors and ultimately improving the user-friendliness and efficiency of the design.

Feature #2

(I)

Add Section Form

Adding and editing a form section would require the user to navigate different screens, making it complex and challenging to check some parameters.

By consolidating input fields into a single side panel, the complexity is reduced, allowing users to add information and set parameters more efficiently.

Prototype #1

Feature #1

(J)

Form Visualisation

Previously, System Administrators spent significant time switching between screens to visualise how the form appeared to the end-user.

Implementing a real-time form visualisation feature reduced the time spent on this task and made it easier for administrators to identify and correct errors immediately. This enhancement streamlined the workflow, improving efficiency and accuracy in form configuration.

Feature #2

(K)

Parent-Children Relationship

After users have added a parent section, they may need to add additional child sections or fields within that parent section.

The main goal of this interface was to provide users with a simple and easy method to add children's sections or fields while ensuring that they understand their relationships. The interface must be logical and intuitive, aligning with how users naturally structure information.

By implementing a design that mirrors users' real-life understanding of parent-child relationships, the aim was to establish a more user-friendly and efficient system. This approach significantly reduces cognitive load and enhances the overall user experience, as the system's structure aligns with users' expectations.

Insights

(L)

(G)

Usability testing and benchmarking determined the increase in user satisfaction, which showed that users spent less time on tasks.

The stakeholders received the new interface and found it to flow well. They found that the form-creation process was simplified and more intuitive, and they completed the task in a shorter period, which indicated improved task efficiency.

Lessons Learnt

(M)

(H)

Participatory Design

A key lesson was the importance of involving users and stakeholders early and often in the design process. As we shifted to two-week sprints, rapid iteration was crucial. We achieved more user-centric and practical solutions by incorporating their needs and insights. This collaborative approach also fostered a sense of ownership and alignment among all participants.

User Mental Models

I learned the importance of understanding and aligning with user mental models. By profoundly analysing other applications and how users think and interact, we were able to design more intuitive and practical solutions. This approach ensured the product met user expectations, was technically feasible and enhanced the overall user experience.

Complex Features

When tackling complex features, it's crucial to prioritise the user journey and iterative user testing. We identified potential pain points by mapping out users' different paths to achieve their goals. Also, through testing, we refined the design, making the feature a more intuitive and efficient experience.

Thanks for checking out my portfolio!